<script setup>
import Marquee from "@/components/Marquee/Marquee.vue";
import MarqueeItem from "@/components/Marquee/MarqueeItem.vue";

import Tab from "@/components/Tab/Tab.vue";
import TabItem from "@/components/Tab/TabItem.vue";
import MeetingProcess from "@/components/MeetingProcess/MeetingProcess.vue";
import Qa from "@/components/Qa/Qa.vue";

import {
  main,
  intro,
  xxzp,
  meetingProcess,
  question,
  photos,
  subject,
  guest,
  meetingData,
} from "@/assets/data/hqb_en.js";

const stickyBtnRef = ref(null);
const topRef = ref(null);

const ob = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      stickyBtnRef.value.classList.add("scale-0");
    } else {
      stickyBtnRef.value.classList.remove("scale-0");
    }
  });
});

onUnmounted(() => {
  ob.disconnect();
});

onMounted(() => {
  ob.observe(topRef.value);

  setTimeout(() => {
    const { height } = document.body.getBoundingClientRect();

    const iframe = top.document.querySelector("iframe");

    console.log("body height", height, "iframe");
    console.dir(iframe);
    if (iframe) {
      iframe.style.height = `${height}px`;
    }
  }, 0);
});
</script>

<template>
  <div class="lg1:p-4">
    <div class="relative overflow-hidden rounded" ref="topRef">
      <img src="/static/hqb/h.png" class="object-cover w-full" />
      <div
        class="absolute flex flex-col justify-around w-[90%] border rounded md:w-2/4 top-[20%] border-indigo-500/0 left-[5%] md:left-8 bg-indigo-500/20 md:bg-indigo-500/0 backdrop-blur md:backdrop-blur-0 h-3/4 md:h-1/2"
      >
        <h2 class="px-2 text-lg text-center text-white truncate1 md:text-4xl">
          <h5 class="text-center text-white truncate1 md:text-2xl md:mb-4">
            {{ main.subtitle }}
          </h5>
          {{ main.title }}
        </h2>

        <div class="flex items-center justify-center">
          <a
            target="_blank"
            :href="main.link"
            class="px-8 py-2 text-lg text-white transition rounded ring-2 ring-white/80 bg-white/20 hover:bg-indigo-900/10 hover:text-white md:text-xl md:py-4 md:px-16 md:font-medium animate-bounce hover:animate-[bounce_10000s_infinite]"
            >Register Information</a
          >
        </div>
      </div>
    </div>

    <div class="p-2 mt-4 border rounded">
      <div class="flex justify-center">
        <a
          href="https://premiumpro.learningmall.cn/activity/form?id=6"
          target="_blank"
          class="text-center p-2 px-8 border border-blue-500 text-blue-500 rounded transition hover:bg-blue-500 hover:text-white"
          >Final-term Submission</a
        >
      </div>
    </div>

    <!-- 介绍 -->
    <div class="p-2 mt-4 border rounded">
      <h5 class="py-2 mb-2 text-2xl">{{ intro.title }}</h5>
      <pre class="px-2 whitespace-pre-line text text-slate-700">
        {{ intro.content }}
      </pre>
    </div>

    <!-- 竞赛主旨 -->
    <div class="relative mt-4 overflow-hidden rounded">
      <img
        :src="subject.bgimg"
        class="object-cover w-full h-40 md:h-auto lg:h-48"
      />
      <div class="absolute top-0 left-0 flex w-full h-full p-6">
        <img
          :src="subject.img"
          class="object-cover w-20 h-full rounded sm:w-48"
        />
        <div class="flex-1 ml-4 overflow-auto text-sm text-white md:text-base">
          <h5 class="text-lg">{{ subject.title }}</h5>
          <div
            class="rounded md:bg-white/10 md:py-6 md:px-4 md:mt-4 md:backdrop-blur"
          >
            {{ subject.content }}
          </div>
        </div>
      </div>
    </div>

    <div class="p-2 mt-4 border rounded">
      <h5 class="py-2 mb-2 text-2xl">Competition Topic</h5>
      <div class="">
        Students are encouraged to focus on hot topics and specific pain points
        in financial industry, work as a team to propose practical FinTech
        solutions with commercial prospects, on either:
      </div>
      <div>1. Any Financial IT related topics, or</div>
      <div>
        2. One of 'Citi Challenges' listed as below, with the opportunity to win
        the special prize.
      </div>
      <img src="/static/hqb/en5.jpg" class="w-full" />
      <img src="/static/hqb/en6.jpg" class="w-full" />
    </div>

    <!-- 参赛对象，专业，报名及规则 -->
    <div class="p-2 mt-4 border rounded">
      <h5 class="py-2 mb-2 text-2xl">About Citi Cup</h5>
      <div class="p-2 mb-2 text-slate-500">
        Feel free to contact the Organizing Committee through website, email or
        call to understand more about the competition e.g. evaluation rules and
        progress. CSTC reserves all rights of interpretation.
      </div>
      <div class="grid gap-4 p-2 rounded sm:grid-cols-2">
        <div class="flex items-center gap-8">
          <h5
            class="p-2 text-center text-indigo-500 rounded w-28 bg-indigo-50 shrink-0"
          >
            Competition Participants
          </h5>
          <div class="">University students.</div>
        </div>

        <div class="flex items-center gap-8">
          <h5
            class="p-2 text-center text-indigo-500 rounded w-28 bg-indigo-50 shrink-0"
          >
            Major
          </h5>
          <div class="">
            No restriction, including but not limited to Software Engineering,
            Computer Science, Economics, Finance, Management, Information
            Management, or Language professionals etc.
          </div>
        </div>

        <div class="flex items-center gap-8">
          <h5
            class="p-2 text-center text-indigo-500 rounded w-28 bg-indigo-50 shrink-0"
          >
            Advisory Committee
          </h5>
          <div class="">
            Citi Financial IT Education Program Council Committee会
          </div>
        </div>

        <div class="flex items-center gap-8">
          <h5
            class="p-2 text-center text-indigo-500 rounded w-28 bg-indigo-50 shrink-0"
          >
            Judging Committee
          </h5>
          <div class="">
            Citi Financial Innovation Application Competition Judging Committee
          </div>
        </div>

        <div class="flex items-center gap-8">
          <h5
            class="p-2 text-center text-indigo-500 rounded w-28 bg-indigo-50 shrink-0"
          >
            Competition Influence
          </h5>
          <div class="">
            Winning team’s relevant information will be announced in the
            national mainstream media.
          </div>
        </div>
      </div>

      <!-- <div class="flex flex-col mt-4 ml-2">
        <div class="p-2 text-center text-indigo-500 border-t border-l border-r border-indigo-200 rounded-tl rounded-tr w-28">竞赛影响力</div>
        <div class="p-2 border border-indigo-200 rounded rounded-tl-none">
          获奖团队相关信息会在全国相关主流媒体予以报道公布。
        </div>
      </div> -->
    </div>

    <!-- 议程 -->
    <div class="p-2 mt-4 border rounded">
      <h5 class="py-2 mb-2 text-2xl">Competition Agenda & Rules</h5>
      <div>
        <img src="/static/hqb/en4.png" class="w-full" />
      </div>
      <MeetingProcess :data="meetingData" />
    </div>
    <!-- 竞赛报名及规则 -->
    <div class="p-2 mt-4 border rounded">
      <h5 class="py-2 mb-2 text-2xl">
        Evaluation Items, Submit Document Checklist (Bilingual in Chinese and
        English) and Criteria
      </h5>
      <img src="/static/hqb/en1.png" class="w-full" />
    </div>

    <!-- 奖励设置 -->
    <div class="p-2 mt-4 border rounded">
      <h5 class="py-2 mb-2 text-2xl">Prize</h5>
      <div class="px-2">
        <img src="/static/hqb/en2.png" class="w-full" />
        <div>
          Additionally, Citi will provide fast-track internship or job
          opportunities to the participant students (including current and
          previous):
        </div>
        <img src="/static/hqb/en3.png" class="w-full" />
      </div>
    </div>

    <!-- 嘉宾 -->
    <div class="p-2 mt-4 border rounded">
      <h5 class="py-2 mb-2 text-2xl">Judging Committee</h5>
      <div class="p-2 text-sm text-slate-500">
        2023-2024 19th Judging Committee Members (In alphabetic order):
      </div>
      <Marquee class="p-2" gap="12">
        <MarqueeItem v-for="(d, i) in [...guest, ...guest]" :key="i">
          <div class="text-center w-36">
            <div
              class="w-20 h-20 m-auto overflow-hidden border border-white rounded-full shadow-xl bg-slate-100"
              v-if="d.url"
            >
              <img
                :src="d.url"
                class="object-cover w-full h-full"
                v-if="d.url"
              />
            </div>
            <div class="py-2 font-medium text-center">{{ d.name }}</div>
            <div class="text-sm text-center">{{ d.role }}</div>
            <div class="mt-1 text-xs text-center text-slate-500">
              {{ d.desc }}
            </div>
          </div>
        </MarqueeItem>
      </Marquee>
    </div>

    <div class="p-2 mt-4 border rounded">
      <h5 class="py-2 mb-2 text-2xl">About Citi Cup</h5>
      <div class="grid grid-cols-2 gap-4 md:grid-cols-4">
        <div
          class="overflow-hidden rounded"
          v-for="(d, i) in [
            {
              url: 'https://www.citi.com.cn/html/index_cn.html',
              name: 'Citibank (China) Co., Ltd.',
              role: 'Sponsor',
            },
            {
              url: 'https://www.sheitc.sh.gov.cn',
              name: 'Shanghai Municipal Commission of Economy and Informatization',
              role: 'Government Co-sponsor',
            },
            {
              url: 'https://www.citigroup.com/china/csts/index_cn.html',
              name: 'Citigroup Services and Technology (China) Limited',
              role: 'Host ',
            },
            {
              url: 'https://www.xjtlu.edu.cn/zh/',
              name: 'Xi\'an Jiaotong-Liverpool University',
              role: 'Organizer',
            },
            {
              url: 'https://www.stefg.org/Default.aspx',
              name: 'Shanghai Technology Entrepreneurship Foundation for Graduates',
              role: 'Organizer',
            },
            {
              url: 'https://www.xjtlu.edu.cn/zh/study/departments/entrepreneur-college-taicang/',
              name: 'XJTLU Entrepreneur College (Taicang)',
              role: 'Co-Organizer',
            },
            {
              url: 'https://www.xjtlu.edu.cn/zh/research/research-institute-of-quantitative-finance',
              name: 'XJTLU Research Institute of Quantitative Finance',
              role: 'Co-Organizer',
            },
            {
              url: 'https://www.xjtlu.edu.cn/zh/study/departments/school-of-intelligent-finance-and-business/',
              name: 'XJTLU School of Intelligent Finance and Business',
              role: 'Co-Organizer',
            },
            {
              url: 'https://www.xjtlu.edu.cn/zh/study/departments/entrepreneurship-and-enterprise-hub/',
              name: 'XJTLU Entrepreneurship and Enterprise Hub',
              role: 'Co-Organizer',
            },
            {
              url: 'https://premium.learningmall.cn',
              name: 'XJTLU Learning Mall',
              role: 'Support',
            },
          ]"
          :key="i"
        >
          <a class="flex flex-col h-full rounded" :href="d.url" target="_blank">
            <div
              class="py-2 font-medium text-center text-indigo-500 bg-indigo-100"
            >
              {{ d.role }}
            </div>
            <div class="h-full p-2 py-4 text-center bg-indigo-50">
              {{ d.name }}
            </div>
          </a>
        </div>
      </div>
    </div>

    <!-- 时间地点 -->
    <div class="p-2 mt-4 border rounded">
      <h5 class="py-2 mb-2 text-2xl">
        Contacts of Organizing Committee Contacts
      </h5>
      <div class="grid gap-4 sm:grid-cols-3">
        <div class="flex">
          <span class="text-slate-500 w-28">E-mail:</span>
          <div class="flex-1">
            citi.cup@xjtlu.edu.cn; citi.cup.alumni@citi.com
          </div>
        </div>
        <div class="flex">
          <span class="text-slate-500 w-28">Contact Person:</span>
          <div class="flex-1">Lin Xiong/ Alice Xu/ Brad Chen</div>
        </div>
        <div class="flex">
          <span class="text-slate-500 w-28">Telephone:</span>
          <div class="flex-1">0512-88970738/ 021-28960965/ 021-28960898</div>
        </div>
      </div>
    </div>

    <!-- 常见问题 -->
    <div class="p-2 mt-4 border rounded">
      <h5 class="py-2 mb-2 text-2xl">FAQ</h5>
      <div
        v-for="(d, i) in question"
        :key="i"
        class="p-2 py-4 text-slate-700"
        :class="{ 'border-t': i != 0 }"
      >
        <Qa :q="d.q" :a="d.a" />
      </div>
    </div>

    <!-- 版权说明 -->
    <div class="p-2 mt-4 border rounded">
      <h5 class="py-2 mb-2 text-2xl">Copyright Statement</h5>
      <div class="p-2 text-slate-500">
        Citi Cup complies with the Copyright Law of the People’s Republic of
        China and related intellectual property law. All submissions must use
        author’s real name. Copyright of a submission belongs to the project
        team. Citi Cup Organizing Committee reserves rights to cite, post
        contents of the projects with project team’s permission. Citi Cup
        Organizing Committee does NOT take responsibility (and will not be held
        liable) for any copyright disputes or actions that may result from
        copyright infringement issues. Copying, reproduction, reprinting of the
        content of any project in/for any media must consult the project team
        and Citi Cup Organizing Committee first.
      </div>
    </div>

    <!-- 底部悬浮报名按钮 -->
    <div
      class="fixed bottom-0 left-0 flex items-center justify-center w-full p-4 transition origin-bottom scale-0 bg-black/50 backdrop-blur"
      ref="stickyBtnRef"
    >
      <a
        target="_blank"
        :href="main.link"
        class="px-16 py-2 text-lg text-white transition rounded ring-2 ring-white/80 bg-white/20 hover:bg-indigo-900/10 hover:text-white md:text-xl md:py-4 md:px-48 md:font-medium"
        >Register Information</a
      >
    </div>

    <div class="px-2 py-1 mt-2 text-xs text-slate-400">
      The above content is provided by the organizing committee, with the
      copyright and responsibility attributable to the competition organizing
      committee. This site does not assume any legal responsibility related to
      the competition. Please note that this translation is formal and precise.
    </div>

    <div class="h-32"></div>
  </div>
</template>
